<template>
  <div>
    <div
      class="container-fluid"
      style="margin-top:20px;margin-bottom:80px;text-align:left;"
      @click="errMsgShow = false"
    >
      <h5>#第一部分#</h5>
      <p>请勾选下列描述与你是否相符：</p>
      <ValueView
        v-for="(item,key) in contents.checks"
        :key="item.id"
        :base="item"
        :id="key"
        v-model="userData.part1[key].value"
      ></ValueView>
      <h5>#第二部分#</h5>
      <p>您的能力简评</p>
      <p>下面是您在6个职业能力方面的自我评定，您可以先与同龄人比较出自己在每一方面的能力，然后斟酌后对自己的能力进行评估。请对每一项能力打适当的分数，数值越大表明您的能力越强。</p>
      <ValueView
        v-for="(item,key) in contents.values"
        :key="item.id"
        :base="item"
        :id="key"
        v-model="userData.part2[key].value"
      ></ValueView>
    </div>
    <div>
      <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
        <a class="navbar-brand" v-show="!errMsgShow">霍兰德测试</a>
        <span class="navbar-text text-danger" v-show="errMsgShow">
          <b>错误：</b>
          {{errMsg}}
        </span>
      </nav>
      <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-bottom">
        <span class="navbar-text" style="color:lightgrey">成都终端管制室 创新工作室 2021</span>
        <ul class="navbar-nav">
          <li class="nav-item">
            <button type="button" class="btn btn-primary" @click="submit()">下一步</button>
            <button type="button" class="btn btn-danger" @click="conlog()" v-show="devMode">LOG</button>
          </li>
        </ul>
      </nav>
      <!-- <p class="alert alert-warning alert-dismissible" v-show="errMsgShow">
      <b>错误：</b>
      {{errMsg}}
      <button class="close" type="button" @click="errMsgShow=false">&times;</button>
    </p>
    <button type="button" class="btn btn-primary" @click="submit()">下一步</button>
      <button type="button" class="btn btn-danger" @click="conlog()" v-show="devMode">LOG</button>-->
    </div>
  </div>
</template>

<script>
import ValueView from "@/components/holland/MainView/ValueView.vue";
export default {
  name: "MainView",
  data() {
    return {
      setDefaultValue: true,
      userData: { part1: [], part2: [] },
      errMsg: "",
      errMsgShow: false
    };
  },
  components: {
    ValueView
  },
  computed: {
    devMode() {
      return this.$store.state.devMode;
    },
    contents() {
      return this.$store.state.hollandData.baseData.contents;
    },
    brief() {
      return this.$store.state.hollandData.baseData.brief;
    }
  },
  methods: {
    initData() {
      for (let i = 0; i < this.contents.checks.length; i++) {
        let p = this.contents.checks[i].part;
        let t = this.contents.checks[i].type;
        let v = -999;
        if (this.devMode && this.setDefaultValue) {
          v = 1;
        }
        this.userData.part1.push({ id: i, part: p, type: t, value: v });
      }
      for (let i = 0; i < this.contents.values.length; i++) {
        let p = this.contents.values[i].part;
        let t = this.contents.values[i].type;
        let v = -999;
        if (this.devMode && this.setDefaultValue) {
          v = 1;
        }
        this.userData.part2.push({ id: i, part: p, type: t, value: v });
      }
    },
    verify() {
      for (let i = 0; i < this.userData.part1.length; i++) {
        if (this.userData.part1[i].value == -999) {
          this.errMsgShow = true;
          this.errMsg =
            "霍兰德测试#第一部分#第" + (i + 1).toString() + "题还未完成";
          return false;
        }
      }
      for (let i = 0; i < this.userData.part2.length; i++) {
        if (this.userData.part2[i].value == null) {
          this.errMsgShow = true;
          this.errMsg =
            "霍兰德测试#第二部分#第" + (i + 1).toString() + "题还未完成";
          return false;
        }
      }
      return true;
    },
    submit() {
      if (this.verify()) {
        let content = this.calc();
        this.$store.commit("setValueHolland", {
          part: "values",
          content: content
        });
        if (this.devMode) {
          window.console.clear();
          window.console.log(JSON.stringify(content));
        }
        //this.$router.push("hollandinput");
        this.goNext();
        return true;
      }
    },
    goNext() {
      this.$store.commit("routerNext");
      this.$router.push(this.$store.state.routerData.nextView);
      if (this.devMode) {
        window.console.log(this.$store.state.routerData.nextView);
      }
    },
    conlog() {
      if (this.devMode) {
        window.console.log(JSON.stringify(this.userData));
      }
    },
    calc() {
      let asix_x = this.$store.state.hollandData.baseData.brief.types;
      let asix_y = this.$store.state.hollandData.baseData.brief.parts;
      let res_v = this.userData.part1.concat(this.userData.part2);
      //
      let cells = [];
      let arrs = [];
      for (let i = 0; i < asix_y.length; i++) {
        let subarr = [];
        for (let j = 0; j < asix_x.length; j++) {
          let value = 0;
          for (let k = 0; k < res_v.length; k++) {
            if (
              res_v[k].type == asix_x[j].letter &&
              res_v[k].part == asix_y[i].index
            ) {
              value += parseInt(res_v[k].value);
            }
          }
          subarr.push(value);
          cells.push({
            p: asix_y[i].index,
            t: asix_x[j].letter,
            v: value
          });
        }
        arrs.push(subarr);
      }
      return cells;
    }
  },
  mounted() {
    if (this.devMode) {
      window.console.log(JSON.stringify(this.userData));
    }
  },
  created() {
    this.initData();
  }
};
</script>

<style scoped>
</style>